{% extends "./base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="app-memberships-wrapper">
    <h3>实例详情</h3>
    <bk-table style="margin-top: 15px;"
        :data="service_instance_list"
        :cell-class-name="cellStyleCallback">
        <bk-table-column label="服务logo" prop="module">
            <template slot-scope="props">
                <img class="service-logo" :src="props.row.service.logo"/>
            </template>
        </bk-table-column>
        <bk-table-column label="服务名称" prop="service.display_name"></bk-table-column>
        <bk-table-column label="绑定模块" prop="module">
            <template slot-scope="props">
                <span>$[ props.row.module  ]</span>
            </template>
        </bk-table-column>
        <bk-table-column label="使用环境" prop="environment.environment"></bk-table-column>
        <bk-table-column label="配置信息">
            <template slot-scope="props">
                <json-pretty :data="props.row.instance" show-length highlight-mouseover-node :deep="0"></json-pretty>
            </template>
        </bk-table-column>
        <bk-table-column label="操作" width="150">
            <template slot-scope="props">
                <bk-button theme="primary" text @click="handleProvision(props.row)" v-if="props.row.instance === null">分配实例</bk-button>
                <bk-button theme="primary" text @click="handleDelete(props.row)" style="color: rgb(234, 54, 54);" v-else>删除实例</bk-button>
            </template>
        </bk-table-column>
    </bk-table>
</div>
{% endblock %}

{% block main_script %}
<script>
    const application = {{ application | to_json }}

    const service_instance_list = {{ service_instance_list | to_json }}

    const URLRouter = {
        list: decodeURI("{% url 'admin.applications.services.list' application.code %}"),
        delete: decodeURI("{% url 'admin.applications.services.recycle_resource' application.code '${module}' '${service_id}' '${instance_id}' %}"),
        provision: decodeURI("{% url 'admin.applications.services.provision' application.code '${module}' '${env}' '${service_id}' %}"),
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#app-memberships-wrapper",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    application,
                    loading: false,
                    loaded: false,
                    form: {
                    },
                    service_instance_list,
                }
            },
            mounted: function () {
                console.log("mounted", this)
                this.fetchData()
            },
            methods: {
                fetchData: function () {
                    if (this.loading) {
                        // 报错
                        return
                    }
                    this.loading = true
                    this.loaded = false
                    this.$http.get(URLRouter.list).then(resp => {
                        this.service_instance_list = resp
                        this.loaded = true
                    }).finally(err => {
                        this.loading = false
                    })
                },
                handleProvision: function (row) {
                    let url = URLRouter.provision.replace("${module}", row.module).replace("${env}", row.environment.environment).replace("${service_id}", row.service.uuid)
                    const h = this.$createElement
                    this.$bkInfo({
                        width: 500,
                        title: '确定要分配实例吗？',
                        subHeader: h('div', {
                            style: {
                                'color': 'red',
                                'text-align': 'center'
                            }
                        }, `即将为 ${row.module} 模块 ${row.environment.environment} 环境分配 ${row.service.name} 服务实例？`),
                        confirmLoading: true,
                        confirmFn: async () => {
                            try {
                                await this.$http.post(url)
                                this.$bkMessage({theme: 'success', message: '分配增强服务实例成功.'})
                                return true
                            } catch (e) {
                                this.$bkMessage({theme: 'error', message: '分配增强服务实例失败.'})
                                return false
                            } finally {
                                await this.fetchData()
                            }
                        }
                    })
                },
                handleDelete: function (row) {
                    let url = URLRouter.delete.replace("${module}", row.module).replace("${service_id}", row.service.uuid).replace("${instance_id}", row.instance.uuid)
                    const h = this.$createElement
                    this.$bkInfo({
                        width: 500,
                        title: '确认要删除吗？',
                        subHeader: h('div', {
                            style: {
                                'color': 'red',
                                'text-align': 'center'
                            }
                        }, `即将删除 ${row.module} 模块 ${row.environment.environment} 环境 ${row.service.name} 服务实例？`),
                        confirmLoading: true,
                        confirmFn: async () => {
                            try {

                                await this.$http.delete(url)
                                this.$bkMessage({theme: 'success', message: '删除增强服务实例成功.'})
                                return true
                            } catch (e) {
                                this.$bkMessage({theme: 'error', message: '删除增强服务实例失败.'})
                                return false
                            } finally {
                                await this.fetchData()
                            }
                        }
                    })
                },
                cellStyleCallback: function ({row, column, rowIndex, columnIndex}) {
                    if (column.label === "配置信息")
                        return 'json-view'
                }
            }
        })
    })
</script>
<style scoped>
    .service-logo{
        width: 35px;
        height: 35px;
        border-radius: 4px;
    }
</style>
{% endblock %}
